<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta content="text/html;charset=ISO-8859-1" http-equiv="Content-Type">
  <title>Master Image Of the Day</title>
  <style type="text/css">
     body {background-color: white; font-family: helvetica, Arial, sans-serif; }
     div.title {text-align: center; font-family: Helvetica, Arial, sans-serif; font-size: 14pt}
     div.date  {text-align: center; font-family: Helvetica,Arial, sans-serif; font-size: 10pt}
     td.info_title {vertical-align: top; text-align: right; font-family: Helvetica,Arial,sans-serif; font-size: 8pt; color: black; font-weight: bold; width: 200px;}
     td.info_text {vertical-align: top; font-family: Helvetica,Arial,sans-serif; font-size: 8pt; color: black; width: 100px;}
     a {font-family: Helvetica, Arial, sans-serif; font-size: 8pt;}
     input {font-family: Helvetica, Arial, sans-serif; font-size: 8pt;}
     h1 {font-family: helvetica; text-align: center}
     h2 {background-color: transparent}
     p {background-color: rgb(250,0,255)}
  </style>
  <script type="text/javascript" src="js/HttpRequest.js"></script>
  <script type="text/javascript" src="js/Position.js"></script>
  <script type="text/javascript" src="js/DateFormatter.js"></script>
  <script type="text/javascript" src="js/Effects.js"></script>
  <script type="text/javascript">
        var httpManager = new HttpManager();
        var selectedImageId;

        function load()
        {
            var now = new Date();
            selectedImageId = now.format("yyyy-mm-dd");
            loadImage(now.format(selectedImageId));
        }

        function loadImage(publishDate)
        {
            var img = new Image();

            //Load Image Info
            httpManager.onread = function (infoFileContents) {
                var imgInfo = infoFileContents.split("|");
                document.getElementById("img_info_description").innerHTML = imgInfo[1];
                document.getElementById("img_info_source").innerHTML = "<a href=" + imgInfo[2] + ">" + imgInfo[2] + "</a>";
                document.getElementById("img_info_date").innerHTML = imgInfo[3];

                //Setup a callback mechanism to be executed after the image loads
                img.onload = function () {
                    var w = img.width;
                    var h = img.height;
                    var ratioW = Number(640/w);
                    var ratioH = Number(480/h);
                    var ratio = Math.min(ratioW, ratioH);
                    fadeCallBack = function (){
                        document.getElementById("masterImage").src = img.src;
                        document.getElementById("img_info_size").innerHTML = img.width + "x" + img.height;
                        document.getElementById("masterImage").style.width = w * ratio;
                        document.getElementById("masterImage").style.height = h * ratio;
                        fadeCallBack = null;
                        opacity('masterImage', 0, 100, 100);
                        delete img;
                    };

                    opacity('masterImage', 100, 0, 100);
                    //alert (ratioW);
                };

                //Load the image
                img.src = "php/get_image_by_publish_date.php?publish_date=" + publishDate;
            };
            httpManager.getAsText("php/get_image_info_by_publish_date.php?publish_date=" + publishDate);

            //Set the index pointer to the newly loaded image
            document.getElementById("ia_" + selectedImageId).style.visibility="hidden";
            selectedImageId = publishDate;
            document.getElementById("ia_" + selectedImageId).style.visibility="visible";
        }

        function toggleSubmitPanel(element) {
            var panel = document.getElementById("submit_panel");
            var panelForm = document.getElementById("file_upload_form");

            if ( panel.style.visibility == "hidden" ) {
                var bottomX = Position.findAbsoluteLeft(element);
                var bottomY = Position.findAbsoluteTop(element);
                var elementW = element.scrollWidth;

                panel.style.left = bottomX - (Number(panel.style.width.replace("px", "")) - elementW) / 2;
                panel.style.top = bottomY;
                slideCallBack = function() {
                    panelForm.style.visibility = "visible";
                };
                slideUp(panel, 0, panel.style.height.replace("px", ""), 50);
                panel.style.visibility = "visible";
                fufTarget = window.frames["upload_target"]; 
                fufTarget.document.body.innerHTML = "";
                resetUploadForm();
            }
            else {
                panelForm.style.visibility = "hidden";
                var panelOriginalH = panel.style.height.replace("px", "");
                slideCallBack = function() {
                    panel.style.visibility = "hidden";
                    panel.style.height = panelOriginalH;
                };
                slideDown(panel, panelOriginalH, 0, 50);
            }
        }

        function tryEnableUploadSubmitButton() {
            fufFile = document.getElementById("fuf_file");
            fufDescription = document.getElementById("fuf_description");
            fufSource = document.getElementById("fuf_source");
            fufEmail = document.getElementById("fuf_email");
            fufSubmit = document.getElementById("fuf_submit");

            if ( fufFile.value != "" && fufDescription.value != "" && fufSource.value != "" && fufEmail.value != "" ) {
                fufSubmit.disabled = false;
            }
            else {
                fufSubmit.disabled = true;
            }
        }

       function resetUploadForm() {
            fuf = document.getElementById("file_upload_form");
            fufSubmit = document.getElementById("fuf_submit");
            //fufTarget = document.getElementById("upload_target");
            fuf.reset();
            fufSubmit.disabled = true;
        }
  </script>
</head>
<body onload="load()">
    <div id="submit_panel" style="position: absolute; top: 300px; left: 900px; width: 420px; height: 330px; background-color: black; 
             opacity: 0.85; filter: alpha(opacity = 85); visibility: hidden;">
        <form id="file_upload_form" method="post" enctype="multipart/form-data" action="php/upload.php" target="upload_target"
              style="position: relative; top: 20px; text-align: center; visibility: hidden;"> 
            <table style="text-align: left; width: 90%; margin-left: auto; margin-right: auto; font-size: 8pt;" border="0" cellpadding="3" cellspacing="3">
                <tr>
                    <td style="color: white; text-align: right; width: 100px; ">Description</td>
                    <td><input id="fuf_description" name="fuf_description" size="28" style="width: 100%" type="text" onchange="tryEnableUploadSubmitButton();"></td>
                </tr>
                <tr>
                    <td style="color: white; text-align: right; width: 100px">Source</td>
                    <td><input id="fuf_source" name="fuf_source" size="28" type="text" style="width: 100%" onchange="tryEnableUploadSubmitButton();"></td>
                </tr>
                <tr>
                    <td style="color: white; text-align: right; width: 100px">Email</td>
                    <td><input id="fuf_email" name="fuf_email" size="28" type="text" style="width: 100%" onchange="tryEnableUploadSubmitButton();"></td>
                </tr>
                <tr>
                    <td style="color: white; text-align: right; width: 100%">File</td>
                    <td>
                        <input name="fuf_file" id="fuf_file" size="18" onchange="tryEnableUploadSubmitButton();" type="file">
                    </td>
                </tr>
                <tr>
                    <td colspan="2" rowspan="1" />
                </tr>
                <tr>
                    <td colspan="2" rowspan="1" style="text-align: right;">
                        <input id="fuf_submit" value="Upload" type="submit">&nbsp&nbsp
                        <input id="fuf_reset" value="Reset" type="reset" onclick="resetUploadForm();">&nbsp&nbsp
                        <input id="fuf_cancel" value="Cancel" onclick="toggleSubmitPanel(null);" type="button">
                    </td>
                </tr>
                <tr>
                    <td colspan="2" rowspan="1" />
                </tr>
            </table>
            <iframe id="upload_target" name="upload_target" src="" style="border: 1px solid gray; width: 380px; height: 110px; background-color: white;"
                       onload="resetUploadForm();">
            </iframe>
        </form>
    </div>
    <div id="debug_panel" style="position: absolute; top: 10px; left: 900px; width: 240px; height: 100px; background-color: cyan;">
        Test
    </div>
<table style="text-align: left;" border="0" cellpadding="0"
 cellspacing="0">
  <tbody>
    <tr align="center">
      <td style="vertical-align: top;"><br>
      </td>
      <td
 style="vertical-align: middle; height: 50px; font-size: 12pt; background-image: url(icons/title-bar.png); color: white;"
 colspan="2" rowspan="1">Master Image Of The Day<br>
      </td>
    </tr>
    <tr>
      <td style="vertical-align: top; font-size: 2px;" colspan="1"
 rowspan="1"><br>
      </td>
      <td
 style="border-left: thin solid black; vertical-align: top; font-size: 2px;"
 rowspan="1" colspan="2"><br>
      </td>
    </tr>
    <tr>
      <td colspan="1" rowspan="2"
 style="vertical-align: top; width: 100px;"><br>
      </td>
      <td colspan="1" rowspan="2"
 style="border: thin solid black; height: 480px; width: 640px; text-align: center; background-color: rgb(245, 245, 245); vertical-align: middle;">
      <img style="border: 0px solid ;" src="#"
 title="Master image of the day" alt="Master image of the day"
 id="masterImage" align="middle" hspace="0" vspace="0"> </td>
      <td
 style="border-top: thin solid black; border-bottom: thin solid black; vertical-align: top; text-align: center; width: 120px; height: 350px; background-color: rgb(170, 182, 234);">
      <script type="text/javascript">
            var theDate = new Date();
            for ( var i = 0; i < 4; i++ ) {
                document.write("<a onclick='loadImage(\"" + theDate.format("yyyy-mm-dd") + "\")' href='#'>"
                                + theDate.format("mmmm dd, yyyy") + "</a>&nbsp"
                                + "<img id='ia_" + theDate.format("yyyy-mm-dd") + "' style='visibility: hidden' src='icons/left-to-right-arrow.png'/><br>");
                theDate.setDate(theDate.getDate() - 1);
            }
        </script><br>
      </td>
    </tr>
    <tr align="center">
      <td
 style="border-bottom: thin solid black; vertical-align: top; background-color: rgb(170, 182, 234); height: 100px;">
      <a id="submit_button"
 title="Submit a new image for the Master Image Of The Day" href="#"
 onclick="toggleSubmitPanel(this)"> Submit New </a> </td>
    </tr>
    <tr>
      <td style="vertical-align: top;"><br>
      </td>
      <td
 style="border-left: thin solid black; border-bottom: thin solid black; vertical-align: middle; background-color: rgb(170, 182, 234); height: 100px;"
 colspan="2" rowspan="1">
      <table style="text-align: left;" border="0" cellpadding="0"
 cellspacing="0">
        <tbody>
          <tr>
            <td class="info_title">Description</td>
            <td style="width: 10px;"><br>
            </td>
            <td id="img_info_description" style="width: 535px;"
 class="info_text">Not Set</td>
          </tr>
          <tr>
            <td class="info_title">Date</td>
            <td> <br>
            </td>
            <td id="img_info_date" class="info_text">Not Set</td>
          </tr>
          <tr>
            <td class="info_title">Size</td>
            <td> <br>
            </td>
            <td id="img_info_size" class="info_text">Not Set</td>
          </tr>
          <tr>
            <td class="info_title">Source</td>
            <td> <br>
            </td>
            <td id="img_info_source" class="info_text">Not Set</td>
          </tr>
        </tbody>
      </table>
      </td>
    </tr>
  </tbody>
</table>
</body>
</html>
